<!--
 * @Author: wpp 906008377@qq.com
 * @Date: 2025-03-28 14:55:11
 * @LastEditors: wpp 906008377@qq.com
 * @LastEditTime: 2025-03-28 15:02:35
 * @FilePath: \vue-project\src\views\component\IntersectionObserver.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="IntersectionObserverPage">
    <h2>IntersectionObserver页面</h2>
  </div>
</template>
<script setup>
import { onMounted } from 'vue'

defineOptions({
  name: 'IntersectionObserverPage'
})

const observerFn = () => {
  const observer = new IntersectionObserver((entries) => {
    console.log('entries', entries)
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        // 监听到页面滚动
        console.log('页面滚动到视口了', entry.target.id)
      }
    })
  })

  observer.observe(document.getElementById('IntersectionObserverPage'))
}

onMounted(() => {
  observerFn()
})
</script>
